<template>
  <div class="c-bg-sgray c-pb20 c-pt156">
    <div class="fixTop" :class="isApp || $isWxApp() || $unenableTopNav() ? 'c-p-t0':'c-p-t68'">
      <div class="c-ph24 c-pv16 c-bg-white">
        <div class="c-flex-row c-w100 c-aligni-center c-pv10 c-ph20 c-hh52 c-br28 c-p c-bg-sgray" @click="clickSearchBar">
          <span class="iconfont c-fs24 c-fc-gray">&#xe6d6;</span>
          <span class="c-ml10 c-fc-gray c-fs24">请输入搜索内容</span>
        </div>
      </div>
      <div class="c-bg-white">
        <my-small-tabbar :tabList="[{title:'新品', index:0}, {title:'热卖', index:1}]" :tabIndex="type" @changeTab="clickChangeTab"></my-small-tabbar>
      </div>
    </div>

    <div @click="clickShop(item.mgId)" v-for="(item,index) in shopList" v-bind:key="index" class="c-ph24 c-bg-white">
      <div class="c-flex-row c-pv20 c-bd-b1">
        <div class="shop-img c-br12"><img class="imgCloseBig" v-lazy="item.avatar" alt="" /></div>
        <div class="c-flex-grow1 c-w0 c-pl20 c-flex-column c-justify-sb">
          <div class="c-fs24 c-lh30 c-text-ellipsis1"><span v-if="item.flashSales && item.flashSales.sales.status == 2" class="c-fs16 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-hh30 c-lh30 c-ph4">限时{{Number(item.flashSales.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}</div>
          <div class="c-aligni-center c-flex-row c-flexw-wrap" v-if="item.cashBack && item.cashBack.detail">
            <span class="c-mr12 c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mt12" v-if="item.cashBack.isDiscount == 1">{{item.cashBack.detail.title + item.cashBack.detail.amount}}</span>
            <span class="c-fs18 c-pv2 c-ph12 theme-bd1 c-br2 theme-fc c-mt12" v-if="item.cashBack.isFreeShipping == 1">
              {{item.cashBack.detail.title}}包邮
            </span>
          </div>
          <div class="c-aligni-center c-flex-row">
            <div class="c-fs24 theme-fc"><span class="c-fs12">{{'￥' | iosPriceFilter}}</span>{{item.flashSales && item.flashSales.sales.status ==2 ? item.flashSales.price : item.price}}</div>
            <div class="c-fs20 c-text-decoration-through c-pl8 c-fc-gray" v-if="item.originalPrice * 1 > 0">{{'￥' | iosPriceFilter}}{{item.originalPrice}}</div>
            <div class="c-fs20 c-fc-gray c-flex-grow1 c-w0 c-textAlign-r">{{item.sales}}人已买</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
  </div>
</template>

<script>
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let cType = '';
export default {
  name: "NewAndHot",
  components: {
    loadingStatusTem,
    MySmallTabbar,
  },
  props: [],
  watch: {
    $route(to, from) {
      // 监听详情页内返回数据不重新加载
      if (to.path == '/mall/shopDetail/shopDetail' || from.path == '/mall/shopDetail/shopDetail') {
        this.isToDetail = true;
      } else {
        this.dataStatus = 'HAS_MORE_DATA';
        this.isToDetail = false;
        this.shopList = [];
        this.getGoods();
      }
    }
  },
  data() {
    return {
      isApp: false,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      type: "NEW",
      shopList: [],
      isToDetail: false,
      dataStatus: 'HAS_MORE_DATA',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle(this.$route.query.Type == 'HOT' ? "热卖" : '新品');// eslint-disable-line
    this.type = this.$route.query.Type == 'NEW' ? 0 : (this.$route.query.Type == 'HOT' ? 1 : 0);
    cType = this.$route.query.Type;
    this.isApp = utilJs.isIOSAppALL() || utilJs.isAndroidApp();
    this.wechatShare();
    if (this.isToDetail == false) {
      this.dataStatus = 'HAS_MORE_DATA';
      this.shopList = [];
      pageIndex = 1;
      this.isToDetail = false;
      this.getGoods();
    }
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },

  methods: {
    //点击搜索框
    clickSearchBar() {
      this.$routerGo(this, "push", { path: "/mall/search/searchShop" });
    },
    clickChangeTab(type) {
      if (this.type == type) {
        return false;
      }
      this.type = type;
      this.shopList = [];
      pageIndex = 1;
      cType = type == 0 ? 'NEW' : 'HOT';
      let newUrl = `${window.location.href.split("#")[0]}#/mall/classification/newAndHot?Type=${type == 0 ? 'NEW' : 'HOT'}`;
      history.replaceState("mallNewAndHot", "", newUrl);
      this.wechatShare();
      this.getGoods();
    },
    clickShop(shopNo) {
      //点击商品
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: {
          shopNo: shopNo
        }
      });
    },
    getGoods() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let urlT = this.type == 0 ? `goods?n=1&page=${pageIndex}` : `goods?h=1&page=${pageIndex}`;
      utilJs.getMethod(global.apiurl + urlT,
        res => {
          if (pageIndex == 1) {
            this.shopList = res.goods.data;
          } else {
            this.shopList = [...this.shopList, ...res.goods.data];
          }
          if (res.goods.total * 1 == res.goods.to * 1) {
            this.dataStatus = res.goods.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        }, failRes => {
          this.dataStatus = 'DATA_ERROR';
        });
    },
    //下滑获取更多
    windowScrollFunction: function () {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.shopList.length > 0) {
          this.getGoods();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = cType == 'HOT' ? '热卖商品' : '新品上市';
      let shareDesc = "点击查看详情";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?Type=${cType}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, '', shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = cType == 'HOT' ? '热卖商品' : '新品上市';
      let shareDesc = "点击查看详情";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?Type=${cType}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, '', shareDesc, function () { });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.shop-img {
  width: 5.25rem;
  max-height: 5.25rem;
  overflow: hidden;
  text-align: center;
}
.btn-search-bar {
  background-color: #F3F7F9;
  border-radius: 0.7rem;
  height: 1.35rem;
  line-height: 1.35rem;
  font-size: 0.6rem;
  color: #9d9da1;
  text-align: center;
}
.fixTop {
  position: fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
  background: white;
}
.c-pt156 {
  padding-top: 3.9rem;
}
</style>
